<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:loodel="http://java.sun.com/jsf/composite/component">
<ui:composition template="/WEB-INF/template/mainTemplate.xhtml">
    <ui:param name="activePage" value="vote"/>
    <ui:define name="metadata">
        <f:metadata>
            <f:viewParam name="id" value="#{learningEventVoteModel.learningEventId}"/>
            <f:event type="preRenderView" listener="#{learningEventVoteController.init}"/>
        </f:metadata>
    </ui:define>
    <ui:define name="content">
        <div>
            <h1>Vote for a Learning Event</h1>
            <h:form rendered="#{learningEventVoteModel.learningEventVoteData.votesClosed}">
                <h:outputText value="Learning Event is already closed"/>
            </h:form>
            <h:form id="voteForm">
                <p:messages errorClass="error" autoUpdate="true"/>

                <p:panel id="invalidId" rendered="#{empty learningEventVoteModel.learningEventId}">
                    <h:inputText id="learningEventIdInput" value="#{learningEventVoteModel.learningEventId}"
                                 placeholder="Enter Learning Event ID" autofocus="true" required="true"
                                 label="Learning Event ID"/>
                    <p:commandButton action="#{learningEventVoteController.enterLearningEventIdAction}" value="Edit"
                                     ajax="false"/>
                </p:panel>

                <p:panel id="valid"
                         rendered="#{!empty learningEventVoteModel.learningEventId and !learningEventVoteModel.learningEventVoteData.votesClosed}">

                    <loodel:learningEventSummary id="eventSummary"
                                                 learningEventVoteData="#{learningEventVoteModel.learningEventVoteData}"/>

                    <p:tabView id="tabView">
                        <p:ajax event="tabChange" listener="#{learningEventVoteController.onTabChange}"/>
                        <p:tab id="tab1" title="Schedule View">
                            <p:schedule id="scheduler" value="#{learningEventVoteModel.scheduleModel}"
                                        initialDate="#{learningEventVoteModel.initialDate}"
                                        widgetVar="scheduleWidget" draggable="false" resizable="false"
                                        firstHour="8" allDaySlot="true" timeFormat="HH:mm">
                                <p:ajax event="eventSelect" listener="#{learningEventVoteController.onEventSelect}"
                                        oncomplete="scheduleWidget.update();" update="@form"/>
                            </p:schedule>
                        </p:tab>
                        <!-- <p:tab id="tab2" title="List View">
                            <p:dataGrid var="car" value="#{learningEventVoteModel.allMembersTimeSlotVotesDataList}"
                                        columns="3"
                                        rows="12">
                                <p:panel header="#{car.timeSlotData.title} - #{car.timeSlotData.shortStartDateTime}"
                                         style="text-align:center"
                                         styleClass="#{car.currentMemberVoted ? 'voted-event' : 'unvoted-event'}">
                                    <h:panelGrid columns="1" style="width:100%">
                                        <p:dataList value="#{car.memberTimeSlotVotes}" var="memberTimeSlotVote"
                                                    itemType="disc">
                                            #{memberTimeSlotVote.voter.fullName}, #{memberTimeSlotVote.description}, #{memberTimeSlotVote.voteTime}
                                        </p:dataList>
                                    </h:panelGrid>
                                </p:panel>
                            </p:dataGrid>
                        </p:tab>-->
                    </p:tabView>
                </p:panel>
            </h:form>
        </div>

        <div class="clear"></div>
    </ui:define>
</ui:composition>
</html>
